<script>
import draggable from "vuedraggable";
import render from "@/components/form-designer/render/render";

const components = {
  itemBtns(h, element, index, parent) {
    const { copyItem, deleteItem } = this.$listeners;
    return [
      <span
        class="drawing-item-copy"
        title="复制"
        onClick={event => {
          copyItem(element, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-copy-document" />
      </span>,
      <span
        class="drawing-item-delete"
        title="删除"
        onClick={event => {
          deleteItem(index, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-delete" />
      </span>
    ];
  },
  itemTrBtns(h, element, index, parent) {
    const { addItem, selectItem, copyItem, deleteItem } = this.$listeners;
    return [
      <span
        style="cursor: pointer; "
        class="el-icon-thumb"
        title="选中"
        onClick={event => {
          selectItem(element, parent);
          event.stopPropagation();
        }}
      ></span>,
      <span
        style="cursor: pointer; "
        class="drawing-item-copy"
        title="复制"
        onClick={event => {
          copyItem(element, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-copy-document" />
      </span>,
      <span
        style="cursor: pointer; "
        class="el-icon-plus"
        title="追加"
        onClick={event => {
          addItem(element, parent);
          event.stopPropagation();
        }}
      ></span>,
      <span
        style="cursor: pointer; "
        class="drawing-item-delete"
        title="删除"
        onClick={event => {
          deleteItem(index, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-delete" />
      </span>
    ];
  }
};
const layouts = {
  colFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const config = element.__config__;
    let className =
      this.activeId === config.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null;
    if (config.showLabel === false) labelWidth = "0";
    return (
      <el-col
        span={config.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        <el-form-item
          label-width={labelWidth}
          label={config.showLabel ? config.label : ""}
          required={config.required}
        >
          <render
            key={config.renderKey}
            conf={element}
            onInput={event => {
              this.$set(config, "defaultValue", event);
            }}
          />
        </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },
  tableFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    const rows = element.__config__.rows;

    let child = renderChildren.apply(this, arguments);

    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <draggable
            style={element.__config__.style}
            element="table"
            list={element.__config__.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
          >
            {child}
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  trFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);

    return (
      <draggable
        style={element.__config__.style}
        element="tr"
        list={element.__config__.children}
        animation={340}
        group="componentsGroup"
        class="drag-wrapper"
      >
        {child}
        <td style="width:80px;text-align:center;border:1px dashed #cecece">
          {components.itemTrBtns.apply(this, arguments)}
        </td>
      </draggable>
    );
  },
  labelItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <div class="drag-wrapper" style={element.__config__.style}>
            <span>{element.__config__.text}</span>
          </div>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  labelInput(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <div class="drag-wrapper" style={element.__config__.style}>
            <label-input
              items={element.__config__.items}
              align={element.__config__.align}
            ></label-input>
          </div>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  tagInput(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <div class="drag-wrapper">
            <sz-tag-input
              config={element.__config__}
              readonly={element.readonly}
              disabled={element.disabled}
              placeholder={element.placeholder}
            ></sz-tag-input>
          </div>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  szTagInput(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={(event) => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <div class="drag-wrapper">
            <sz-tag-input
              config={element.__config__}
              readonly={element.readonly}
              disabled={element.disabled}
              placeholder={element.placeholder}
            ></sz-tag-input>
          </div>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  szQuickReply(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <div class="drag-wrapper">
            <sz-quick-reply
              defaultValue={element.__config__.defaultValue}
              showSignButton={element.__config__.showSignButton}
              showAcceptButton={element.__config__.showAcceptButton}
              showRejectButton={element.__config__.showRejectButton}
              showCancelButton={element.__config__.showCancelButton}
              dateFormat={element.__config__.format}
              isMerge={element.__config__.isMerge}
              addDate={element.__config__.addDate}
              placeholder={element.placeholder}
              align={element.__config__.align}
              fieldName={element.__config__.__vModel__}
            ></sz-quick-reply>
          </div>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  tdFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);
    const colspan = element.__config__.colspan;
    const rowspan = element.__config__.rowspan;
    return (
      <td style={element.__config__.style} colspan={colspan} rowspan={rowspan}>
        <el-col span={element.__config__.span}>
          <el-row
            gutter={element.__config__.gutter}
            class={className}
            nativeOnClick={event => {
              activeItem(element);
              event.stopPropagation();
            }}
          >
            <span class="component-name">
              {element.__config__.componentName}
            </span>
            <draggable
              list={element.__config__.children}
              animation={340}
              group="componentsGroup"
              class="drag-wrapper"
            >
              {child}
            </draggable>
            {components.itemBtns.apply(this, arguments)}
          </el-row>
        </el-col>
      </td>
    );
  },
  rowFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={element.__config__.span}>
        <el-row
          gutter={element.__config__.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.__config__.componentName}</span>
          <draggable
            list={element.__config__.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
          >
            {child}
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },
  szFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <sz-form-item
        headerTitle={element.headerTitle}
        span={element.__config__.span}
        gutter={element.__config__.gutter}
        borderClassName={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        <span class="component-name">{element.__config__.componentName}</span>
        <draggable
          list={element.__config__.children}
          animation={340}
          group="componentsGroup"
          class="drag-wrapper"
        >
          {child}
        </draggable>
        {components.itemBtns.apply(this, arguments)}
      </sz-form-item>
    );
  },
  szForm(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.__config__.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <sz-form btnName={element.btnName} config={element.__config__}>
        <el-col span={element.__config__.span}>
          <el-row
            gutter={element.__config__.gutter}
            class={className}
            nativeOnClick={event => {
              activeItem(element);
              event.stopPropagation();
            }}
          >
            <span class="component-name">
              {element.__config__.componentName}
            </span>

            <draggable
              list={element.__config__.children}
              animation={340}
              group="componentsGroup"
              class="drag-wrapper"
            >
              {child}
            </draggable>

            {components.itemBtns.apply(this, arguments)}
          </el-row>
        </el-col>
      </sz-form>
    );
  }
};

function renderChildren(h, element, index, parent) {
  const config = element.__config__;
  if (!Array.isArray(config.children)) return null;
  return config.children.map((el, i) => {
    const layout = layouts[el.__config__.layout];
    if (layout) {
      return layout.call(this, h, el, i, config.children);
    }
    return layoutIsNotFound.call(this);
  });
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.__config__.layout}匹配的layout`);
}

export default {
  components: {
    render,
    draggable
  },
  props: ["element", "index", "drawingList", "activeId", "formConf"],
  render(h) {
    const layout = layouts[this.element.__config__.layout];

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList);
    }
    return layoutIsNotFound.call(this);
  }
};
</script>
